<template>
  <div class="function-container">
    <je-panel v-bind="options">
      <template #tbar>
        <!-- 头部内容 -->
        <div class="header">
          <!-- 产品 -->
          <je-dropdown :trigger="['click']">
            <je-button class="product-class" type="text" icon="fal fa-align-justify">
              <span style="margin-left: 14px">
                {{ funcStore.product.name }}
              </span>
            </je-button>
            <template #overlay>
              <je-menu>
                <je-menu-item
                  v-for="item in productData"
                  :key="item"
                  @click.stop="handleProductClick(item)"
                >
                  {{ item.PRODUCT_NAME }}
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
          <!-- 添加 -->
          <je-dropdown :trigger="['click']">
            <template #overlay>
              <je-menu>
                <je-menu-item
                  v-for="item in dropdownData"
                  :key="item"
                  :disabled="item.disabled"
                  @click.stop="handleMenuClick(item)"
                >
                  <i :class="item.icon" /> {{ $t(item.label) }}
                </je-menu-item>
              </je-menu>
            </template>
            <je-button
              type="text"
              class="clean-right-border add-border"
              icon="fal fa-plus"
              style="margin-left: 4px"
            >
              添加
              <DownOutlined />
            </je-button>
          </je-dropdown>
          <je-button
            class="clean-right-border"
            type="text"
            icon="jeicon jeicon-broom"
            @click="cleanAllCache"
          >
            清空缓存
          </je-button>
          <je-button
            class="clean-right-border"
            type="text"
            icon="fal fa-layer-group"
            @click="xTreeTable.clearTreeExpand()"
            >全部收起</je-button
          >
          <je-button class="clean-right-border" type="text" icon="fal fa-book" @click="openMenus"
            >打开菜单</je-button
          >
          <je-input-search
            v-model:value="searchValue"
            placeholder="搜索"
            label-field="text"
            sub-label-field="FUNCINFO_FUNCCODE"
            style="width: 280px; margin-left: 4px; top: -5px"
            allow-clear
            enter-button="搜索"
            @search="onSearch"
            @select="onSelect"
          >
          </je-input-search>
          <!-- 改为组件menu -->
          <FuncConfigMenu
            :func-code="modalOption.record?.FUNCINFO_FUNCCODE"
            :func-id="modalOption.record?.JE_CORE_FUNCINFO_ID"
            :func-type="modalOption.record.FUNCINFO_FUNCTYPE"
          />
        </div>
      </template>
      <template #default>
        <je-table
          ref="xTreeTable"
          resizable
          border="outer"
          :auto-resize="true"
          header-align="left"
          align="left"
          draggable
          row-id="id"
          row-key
          :loading="loadingStatus"
          show-overflow="ellipsis"
          :highlight-current-row="true"
          :highlight-hover-row="true"
          :data="tableData"
          :tree-config="{
            trigger: 'cell-dblclick', // 改为单击操作，双击太费手指
            rowField: 'id',
            parentField: 'parent',
          }"
          size="mini"
          @before-drop="beforedrop"
          @cell-dblclick="clickIconGetFunction"
          @current-change="onClickRow"
          @drop="dragTable"
        >
          <!-- <je-table-column type="drag" /> -->
          <je-table-column title="名称" field="text" width="300" tree-node>
            <template #nodeIcon="{ row }">
              <i
                :class="row.iconclass"
                style="margin-right: 5px; cursor: pointer"
                :style="`color: ${row.iconColor}`"
                @click.stop="clickIconGetFunction({ row, type: 'click' })"
              />
            </template>
            <template #default="{ row }">
              {{ row.text }}
            </template>
          </je-table-column>
          <je-table-column title="编码" field="code" width="260"></je-table-column>
          <je-table-column title="类型" field="nodeInfoType" width="140">
            <template #default="{ row }">
              {{ formateCodeToText(row.nodeInfoType) }}
            </template>
          </je-table-column>
          <je-table-column title="操作" field="operate" width="260">
            <template #default="{ row }">
              <span v-for="(operateItem, operateIndex) in row.operate" :key="operateIndex">
                <je-tooltip placement="top" :title="operateItem.disable ? operateItem.tip : ''">
                  <span
                    type="text"
                    :disabled="operateItem.disable"
                    :style="`color:${operateItem.color}`"
                    style="padding-right: 20px; display: inline-block; cursor: pointer"
                    @click.self.stop="handleOperateButton(operateItem, row)"
                  >
                    {{ operateItem.label }}
                  </span>
                </je-tooltip>
              </span>
            </template>
          </je-table-column>
          <je-table-column
            title="功能描述"
            field="FUNCINFO_FUNCREMARK"
            min-width="220"
          ></je-table-column>
          <je-table-column title="创建人" field="SY_CREATEUSERNAME" width="100"></je-table-column>
          <je-table-column title="创建时间" field="SY_CREATETIME" width="200"></je-table-column>
          <je-table-column title="修改人" field="SY_MODIFYUSERNAME" width="100"></je-table-column>
          <je-table-column title="修改时间" field="SY_MODIFYTIME" width="200"></je-table-column>
        </je-table>
      </template>
    </je-panel>
    <!-- 业务中的添加，对row的操作目前还是弹窗 -->
    <div v-if="modalOption.modalFlag">
      <component
        :is="modalOption.activeModal"
        :visble="modalOption.modalFlag"
        :record="modalOption.record"
        :value="modalOption.value"
        @changeModal="changeModal"
        @changeSelectRow="changeSelectRow"
      ></component>
    </div>
  </div>
</template>

<script>
  import { onMounted, ref, defineComponent, reactive, nextTick } from 'vue';
  import { ADD_FUNCTION_TYPE, FUNCTION_TABLE_COLUMNS, OPERATE_BUTTON } from '@/helper/constant';
  import { Modal, Grid, Search, Panel, Button, Tooltip, Dropdown, Menu } from '@jecloud/ui';
  import { formateCodeToText } from './../helper/common';
  import { cleanCache } from './../helper/function';
  import { pinyin, getCurrentUser } from '@jecloud/utils';
  import VueEvent from '@/helper/event';
  import {
    GetFunctionTreeData,
    GetFuncRefresh,
    getProductData,
    MoveTable,
    DeleteChildFunction,
  } from './../api/index';

  import { FUNCTION_MODULES } from '@/helper/compontents';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { useFuncConfig } from '@/hooks/use-func-config';
  import { useMicroStore } from '@common/store/micro-store';
  import { useFuncStore } from '@/store/func-store';
  import FuncConfigMenu from './config/menu.vue';
  export default defineComponent({
    name: 'FunctionIndex',
    components: {
      FuncConfigMenu,
      JeButton: Button,
      JeDropdown: Dropdown,
      JeMenu: Menu,
      JeMenuItem: Menu.Item,
      JeTable: Grid,
      JeTableColumn: Grid.Column,
      JeInputSearch: Search,
      DownOutlined,
      JeTooltip: Tooltip,
      JePanel: Panel,
      ...FUNCTION_MODULES.FUNCTION_TABLE_OPERATE,
    },
    setup() {
      const { showFuncConfig } = useFuncConfig();
      const funcStore = useFuncStore();
      const microStore = useMicroStore();
      // 关于modalOption 的配置，弹窗
      const modalOption = reactive({
        modalFlag: false, // 默认modal都是隐藏的false
        activeModal: '', // 默认没有激活的弹窗类型
        title: '', // Modal的title
        record: {}, // 点击当前列表record内容
      });
      // 从localStorage中获取用户唯一标识
      const { deptmentUserId } = getCurrentUser();
      const storageProductId = ref(localStorage.getItem(deptmentUserId) || '');
      // 查询数值
      const searchValue = ref('');

      // 表格中表头数据
      const columnsData = ref(FUNCTION_TABLE_COLUMNS);
      // 表格里面tree数据
      const loadingStatus = ref(true); // 默认数据是true
      // 系统性列表数据初始化
      const tableData = ref([]);
      const newArr = ref([]);
      // 点击添加按钮展示的数据
      const dropdownData = ref([]);
      const xTreeTable = ref(null);
      // 产品的数据
      let productData = ref([]);

      // 定义的所有方法
      const methods = {
        // 打开菜单
        openMenus() {
          microStore.emitAdmin('admin-openmenu', {
            menuId: 'c108mbhoApKgOEMAZYM',
            layout: 'app',
          });
        },
        // 拖拽逻辑
        beforedrop({ row, target, action }) {
          // target是要放入的地方
          // rows是当前拖动节点
          // sort 平级排序
          // 集合是最内节点
          // 功能下面可以有功能和集合
          // 模块下面可以有功能和模块
          //  子系统下面只能是模块

          // 如果是insert
          if (action == 'insert') {
            // 如果是子功能，目标对象如果不是功能，并且 return false
            if (
              row.FUNCINFO_NODEINFOTYPE == 'FUNCFIELD' &&
              ['FUNC', 'SYSTEM', 'FUNCFIELD', 'MODEL'].includes(target.nodeInfoType)
            ) {
              return false;
            }
            // 如果是功能，目标对象如果是子系统、子功能，return false
            if (
              row.FUNCINFO_NODEINFOTYPE == 'FUNC' &&
              ['FUNCFIELD', 'SYSTEM', 'FUNC'].includes(target.nodeInfoType)
            ) {
              return false;
            }
            // 如果是模块
            if (
              row.FUNCINFO_NODEINFOTYPE == 'MODEL' &&
              ['FUNC', 'FUNCFIELD'].includes(target.nodeInfoType)
            ) {
              return false;
            }
            if (
              row.FUNCINFO_NODEINFOTYPE == 'SYSTEM' &&
              ['FUNC', 'FUNCFIELD', 'MODEL', 'SYSTEM'].includes(target.nodeInfoType)
            ) {
              return false;
            }
            if (
              row.FUNCINFO_NODEINFOTYPE == 'FUNCFIELD' &&
              ['MODEL', 'SYSTEM'].includes(target.nodeInfoType)
            ) {
              return false;
            }
          } else {
            if (action == 'sort') {
              if (
                ['FUNC', 'FUNCFIELD', 'MODEL'].includes(target.nodeInfoType) &&
                target.parent == 'ROOT'
              ) {
                return false;
              }
              if (
                row.nodeInfoType == 'SYSTEM' &&
                ['FUNC', 'FUNCFIELD', 'MODEL'].includes(target.nodeInfoType)
              ) {
                return false;
              }
              if (
                row.nodeInfoType == 'MODEL' &&
                ['FUNC', 'FUNCFIELD', 'SYSTEM'].includes(target.nodeInfoType)
              ) {
                return false;
              }
              if (
                row.nodeInfoType == 'FUNC' &&
                ['SYSTEM', 'FUNCFIELD', 'MODEL'].includes(target.nodeInfoType)
              ) {
                return false;
              }
              if (row.nodeInfoType == 'FUNC' && row.parent != target.parent) {
                return false;
              }
              if (row.FUNCINFO_NODEINFOTYPE == 'FUNCFIELD' && row.parent != target.parent) {
                return false;
              }
            }
          }
        },
        dragTable({ info, action }) {
          const params = {
            tableCode: 'JE_CORE_FUNCINFO',
            id: info.id,
          };
          //如果拖拽在节点里面
          if (action == 'insert') {
            params.place = 'inside';
            params.toId = info.parentId;
          } else {
            //如果在节点的上面
            if (info.nextId != undefined) {
              params.place = 'above';
              params.toId = info.nextId;
            } else if (info.prevId != undefined) {
              params.place = 'below';
              params.toId = info.prevId;
            }
          }
          MoveTable(params)
            .then((res) => {
              Modal.notice(res.message, 'success');
              methods.getTableData();
            })
            .catch((e) => {
              Modal.alert(e.message, 'error');
            });
        },

        filterText(item, keyword) {
          // 目前匹配是编码和名称
          const text = item.text?.toLocaleLowerCase() ?? '';
          const code = item.FUNCINFO_FUNCCODE?.toLocaleLowerCase() ?? '';
          const pinyinText = pinyin(text, 'pinyin');
          const pinyinCode = pinyin(code, 'pinyin');
          if (
            text.includes(keyword) ||
            pinyinText.includes(keyword) ||
            pinyinCode.includes(keyword)
          ) {
            return true;
          }
          return false;
        },
        // 点击搜索之后的item
        onSelect(val, option) {
          searchValue.value = val;
          const row = xTreeTable.value.getRowById(option.id);
          if (!row) return false;
          xTreeTable.value.setTreeExpand4Path({ row, expand: true }).then((row) => {
            xTreeTable.value.setSelectRow(row);
            setTimeout(() => {
              xTreeTable.value.scrollToRow(row);
              nextTick(() => {
                modalOption.record = row[0];
                const selectRecordType = row[0].FUNCINFO_NODEINFOTYPE;
                methods.handerAddFunctionType(selectRecordType);
              });
            }, 200);
          });
        },
        // 搜索逻辑处理
        onSearch(val, resolve) {
          !val && xTreeTable.value.clearTreeExpand();
          const items = [];
          const keyword = val.toLocaleLowerCase();
          newArr.value.forEach((item) => {
            if (methods.filterText(item, keyword)) {
              items.push(item);
            }
          });
          resolve(items);
        },
        // 递归处理function 列表数据
        formatArrTable(arr) {
          arr.map((item) => {
            const obj = {};
            obj.FUNCINFO_FUNCCODE = item.FUNCINFO_FUNCCODE;
            obj.text = item.FUNCINFO_FUNCNAME;
            obj.id = item.JE_CORE_FUNCINFO_ID;
            newArr.value.push(obj);
            //递归循环
            item.children.length && methods.formatArrTable(item.children);
          });
          return newArr.value;
        },
        // 计算属性处理类型
        filterType(type) {
          return ADD_FUNCTION_TYPE.filter((item) => item.value == type);
        },
        // 专门为删除做的选中处理
        changeSelectRow() {
          xTreeTable.value.setSelectRow({});
        },
        // 点击操作按钮
        changeModal(value) {
          searchValue.value = '';
          modalOption.modalFlag = value;
          methods.getTableData();
        },
        // 根据record中的type处理添加类型
        handerAddFunctionType(selectRecordType) {
          ADD_FUNCTION_TYPE.forEach((item) => {
            item.disabled = false;
            // selectRecordType为空,只可以创建子系统['SYSTEM']
            if (!selectRecordType && item.value != 'SYSTEM') {
              item.disabled = !item.disabled;
            }
            //  selectRecordType为SYSTEM,只可以创建MODEL
            if (selectRecordType == 'SYSTEM' && !['MODEL'].includes(item.value)) {
              item.disabled = !item.disabled;
            }
            //  selectRecordType为MODEL,只可以创建MODEL，FUNC
            if (selectRecordType == 'MODEL' && !['MODEL', 'FUNC'].includes(item.value)) {
              item.disabled = !item.disabled;
            }
            //  selectRecordType为FUNC,只可以创建FUNCFIELD
            if (selectRecordType == 'FUNC' && !['FUNCFIELD', 'FUNC'].includes(item.value)) {
              item.disabled = !item.disabled;
            }
            if (selectRecordType == 'FUNCFIELD') {
              item.disabled = true;
            }
          });
          dropdownData.value = ADD_FUNCTION_TYPE;
        },
        // 点击列表record
        onClickRow({ row, newValue }) {
          if (!newValue) {
            modalOption.record = {};
            methods.handerAddFunctionType('');
            return false;
          }
          // !defaultExpandKeys.value.some((item) => item == row.id) &&
          //   defaultExpandKeys.value.push(row.id);
          modalOption.record = row;
          // record 这边是选中的数据，确认recode是属于哪个类型FUNCINFO_NODEINFOTYPE
          const selectRecordType = row.FUNCINFO_NODEINFOTYPE;
          methods.handerAddFunctionType(selectRecordType);
        },
        clickIconGetFunction({ row, type, column }) {
          if (row.FUNCINFO_NODEINFOTYPE == 'SYSTEM' || row.FUNCINFO_NODEINFOTYPE == 'MODEL') {
            return false;
          }
          if (type && column && column.field == 'operate') {
            return false;
          }
          // 打开功能配置
          showFuncConfig({ funcId: row.JE_CORE_FUNCINFO_ID });
        },
        // 点击添加按钮下的item
        handleMenuClick(item) {
          if (item.disabled) {
            return false;
          }
          modalOption.value = item.value;
          modalOption.modalFlag = true;
          modalOption.activeModal = item.compontent;
        },
        // 获取子系统table数据
        getTableData(id) {
          newArr.value = [];
          const params = {
            searchValue: '',
            SY_PRODUCT_ID: funcStore.product.id,
          };
          GetFunctionTreeData(params)
            .then((res) => {
              // defaultExpandKeys.value = [];
              tableData.value = methods.recursiveFilter(res.children);
              // console.log('defaultExpandKeys.value', defaultExpandKeys.value);
              // xTreeTable.value.setTreeExpand(defaultExpandKeys.value, true);
              newArr.value = methods.formatArrTable(res.children) || [];
              loadingStatus.value = false; // 等加载到数据的时候loading就变为false
              if (id) {
                setTimeout(() => {
                  !loadingStatus.value && methods.onSelect('', { id });
                }, 200);
              }
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
        // 递归处理function 列表数据
        recursiveFilter(arr) {
          arr.map((item) => {
            // 处理时间
            item.SY_CREATETIME = methods.formatTime(item.SY_CREATETIME);
            item.SY_MODIFYTIME = methods.formatTime(item.SY_MODIFYTIME);
            // 处理操作按钮的权限
            item.operate = methods.handleOperatePerm(item.nodeInfoType, item);
            if (item.children) {
              //递归循环
              methods.recursiveFilter(item.children);
            }
            item.iconclass = methods.changeColor(item.nodeInfoType, 'icon');
            item.iconColor = methods.changeColor(item.nodeInfoType, 'color');
          });
          return arr;
        },
        formatTime(time) {
          return time && time.substring(0, 10);
        },
        changeColor(type, key) {
          const item = ADD_FUNCTION_TYPE.find((item) => item.value === type);
          return (item && item[key]) || '';
        },
        // 处理操作按钮的权限
        handleOperatePerm(type, itemObj) {
          return OPERATE_BUTTON.map((item) => {
            item.disable = false;
            if (type == 'SYSTEM' || type == 'MODEL') {
              if (item.value == 'copy' || item.value == 'empty' || item.value == 'refresh') {
                item.disable = true;
                item.color = '#D9D9D9';
              }
            }
            if (type == 'FUNC' || type == 'FUNCFIELD') {
              if (item.value == 'copy') {
                item.disable = false;
                item.color = '#3265F5';
              }
              if (item.value == 'empty') {
                item.color = '#A30014';
              }
              if (item.value == 'refresh') {
                item.color = '#0A7900';
              }
            }
            if (item.value == 'delete') {
              if (!itemObj.leaf) {
                item.disable = true;
                item.color = '#D9D9D9';
              } else {
                item.disable = false;
                item.color = '#A30014';
              }
            }
            return { ...item };
          });
        },
        // 点击table中操作字段里面的按钮
        handleOperateButton(item, record) {
          if (item.disable) {
            return false;
          }
          const isHas = ['FUNC', 'FUNCFIELD'].includes(record.FUNCINFO_NODEINFOTYPE);
          if (isHas && item.value == 'update') {
            showFuncConfig({ funcId: record.JE_CORE_FUNCINFO_ID });
            return false;
          }
          const isShowModal = ['update', 'copy', 'empty'].includes(item.value);
          if (isShowModal) {
            modalOption.modalFlag = true;
            modalOption.activeModal = item.compontent;
            modalOption.record = record;
          }

          // 如果是删除按钮的话，直接用Modal.comfirm
          if (item.value == 'delete') {
            const typeName = formateCodeToText(record.FUNCINFO_NODEINFOTYPE);
            Modal.confirm(`是否删除${typeName}数据?`, () => {
              const params = { ids: record.JE_CORE_FUNCINFO_ID };
              DeleteChildFunction(params)
                .then((res) => {
                  Modal.message(res.message, 'success');
                  searchValue.value = '';
                  methods.getTableData();
                  // 重置按钮状态
                  const records = xTreeTable.value.getSelectedRecords();
                  if (
                    records.length <= 0 ||
                    record.JE_CORE_FUNCINFO_ID == records[0]?.JE_CORE_FUNCINFO_ID
                  ) {
                    ADD_FUNCTION_TYPE.forEach((item) => {
                      if (item.value == 'SYSTEM') {
                        item.disabled = false;
                      } else {
                        item.disabled = true;
                      }
                    });
                    dropdownData.value = ADD_FUNCTION_TYPE;
                  }
                })
                .catch((err) => {
                  Modal.alert(err.message, 'error');
                });
            });
            return false;
          }
          // 如果是刷新按钮的话，需要调取两个接口/je/develop/funcInfo/getStaticFuncPermByCode
          // je/develop/funcInfo/getStaticFuncByCode

          if (item.value == 'refresh') {
            const params = {
              tableCode: 'JE_CORE_FUNCINFO',
              FUNCINFO_FUNCCODE: record.FUNCINFO_FUNCCODE,
              refresh: true,
              perm: 0,
            };

            // Promise.all([GetFunctionPerm(params), GetFunctionData(params)])
            GetFuncRefresh(params)
              .then(() => {
                Modal.message('刷新成功', 'success');
              })
              .catch((err) => {
                Modal.alert(err.message, 'error');
                console.log('error', err);
              });
          }
          return false;
        },
        // 获取产品数据
        getProduce() {
          // 在这边做个处理，如果地址栏有参数的时候要拿到产品ID，和功能的ID
          const params = {
            tableCode: 'JE_PRODUCT_MANAGE',
            funcCode: 'JE_PLATFORM_PRODUCT_MANAGE',
            j_query: JSON.stringify({
              order: [{ code: 'SY_ORDERINDEX', type: 'ASC' }],
            }),
          };
          getProductData(params)
            .then((res) => {
              productData.value = res;
              //用产品的ID给缓存里面存对应的数据
              const urlParams = methods.parseUrlParams(decodeURIComponent(window.location.href));
              // 首先判断缓存里面有值，那么从缓存里面取值设置产品信息,和功能ID
              // 如果地址栏上有productId,那么就要打开对应的服务，如果没有的话，那就找借口返回的第一个，更新storageProductId.value里面的缓存
              const { productId = '', id = '' } = urlParams;

              const checkId = productId || storageProductId.value || res[0].JE_PRODUCT_MANAGE_ID;
              // 通过productId从产品的接口中找对的item
              const checkItem = res.find((item) => checkId == item.JE_PRODUCT_MANAGE_ID) || res[0];
              funcStore.setProduct(checkItem); // 设置产品
              // 更新缓存
              storageProductId.value = checkId;
              localStorage.setItem(deptmentUserId, checkId);
              methods.getTableData(id);
            })
            .catch((err) => {
              Modal.alert(err.message, 'error');
              console.log('error', err);
            });
        },
        // 切换产品
        handleProductClick(item) {
          funcStore.setProduct(item); // 设置产品
          storageProductId.value = item.JE_PRODUCT_MANAGE_ID;
          localStorage.setItem(deptmentUserId, storageProductId.value);
          searchValue.value = '';
          methods.handerAddFunctionType('');
          methods.getTableData();
        },
        cleanAllCache() {
          cleanCache({ productCode: funcStore.product.code });
        },
        // 获取地址拦参数
        parseUrlParams(url) {
          const params = {};
          if (!url || url === '' || typeof url !== 'string') {
            return params;
          }
          const paramsStr = url.split('?')[1];
          if (!paramsStr) {
            return params;
          }
          const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ');
          for (let i = 0; i < paramsArr.length / 2; i++) {
            const value = paramsArr[i * 2 + 1];
            params[paramsArr[i * 2]] = value === 'true' ? true : value === 'false' ? false : value;
          }
          return params;
        },
      };
      onMounted(() => {
        searchValue.value = '';
        methods.getProduce();
        // 初始化
        methods.handerAddFunctionType('');
      });
      VueEvent.on('refleshTreeData', () => {
        methods.getTableData();
      });

      return {
        dropdownData,
        tableData,
        columnsData,
        loadingStatus,
        modalOption,
        ...methods,
        xTreeTable,
        // defaultExpandKeys,
        searchValue,
        productData,
        funcStore,
        formateCodeToText,
        options: reactive({
          tbar: { size: 56 },
        }),
        newArr,
      };
    },
  });
</script>
<style lang="less" scoped>
  .function-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .vxe-header--column .vxe-resizable {
      width: 1px !important;
      height: 100% !important;
      background: #d9dddf;
    }
    .icon-color {
      color: '#3265F5';
    }
    .header {
      width: 100%;
      background: #fff;
      border-top: 1px solid #e6e6e6;
      border-left: 1px solid #e6e6e6;
      border-right: 1px solid #e6e6e6;
      padding: 11px 0 7px 0;
      // height: 56px;
      .ant-btn {
        padding: 0px 12px !important;
        height: 32px !important;
        line-height: 32px !important;
        // border-radius: 0 !important;
      }
      .add-border {
        position: relative;
        &:after {
          content: '';
          display: inline-block;
          height: 24px;
          width: 1px;
          background: #d9d9d9;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -6px;
        }
      }
      .product-class {
        position: relative;
        border: 0px;
        color: #3265f5;
        padding-left: 100px;
        // padding: 0 12px;
        i {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          line-height: 32px;
          width: 32px;
          height: 32px;
          background: #ecedf0;
          border-radius: 2px;
          color: #3f3f3f;
          display: inline-block;
        }
      }
    }
  }
</style>
<style lang="less">
  .function-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .vxe-table--render-default.size--mini {
      font-size: 14px !important;
    }
    .vxe-table--body-wrapper {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    .ant-table-striped :deep(.table-striped) td {
      background-color: #fafafa;
    }
    .clean-right-border:hover {
      background: #d9d9d9 !important;
      border-radius: 2px !important;
    }
    .Search-Input {
      > .ant-input-search {
        height: 32px;
        top: -1px;
      }
    }
  }
</style>
